<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MI meijin website </title>
    <meta name="author" content="Mimeijin">
    <meta name="keywords" content="个人作品集，个人网站，作品集，设计作品集，UX/UI，交互作品，设计师网站">
    <link rel="shortcut icon" href="ds.ico" type="image/x-icon" />

</head>
<style>
    .nav {
        display: inline-block;
        width: 960px;
        margin: 50px auto;
        list-style: none;
        overflow: hidden;
        z-index: 3;
        right: 1px;
        top: 30px;
        position: absolute;
        font-size: 25px;
    }
    
    .nav li {
        float: left;
        width: 25%;
    }
    
    .nav a {
        text-align: center;
        padding: 19px;
        font-weight: bold;
        color: rgb(241, 149, 28);
        text-decoration: none;
    }
    
    .nav a:hover {
        text-decoration: underline;
    }
    
    div.a {
        position: relative;
        left: 28px;
        top: 20px;
        width: 1280px;
        height: 700px;
        transition: all 2s;
    }
    
    div.a:hover {
        transform: scale(1.5);
    }
    
    .btn {
        position: absolute;
        width: 650px;
        height: 700px;
        background-color: rgba(17, 42, 126, 0.89);
        top: 27px;
        left: 37px;
        box-shadow: 0px 0px 8px rgb(5, 5, 92);
    }
    
    h1 {
        position: absolute;
        color: white;
        font-size: 85px;
        font-weight: bolder;
        top: 90px;
        left: 45px;
        text-shadow: 10px 10px 10px rgb(5, 13, 56);
    }
    
    h1:hover {
        color: rgb(252, 177, 79);
    }
    
    p {
        position: absolute;
        color: white;
        font-size: 20px;
        font-style: lighter;
        top: 390px;
        left: 45px;
    }
    
    p:hover {
        color: rgb(252, 177, 79);
    }
    
    div .etn {
        position: absolute;
        border-radius: 8px;
        width: 125px;
        height: 40px;
        transition: all 2s;
        background-color: rgb(241, 149, 28);
        top: 580px;
        left: 83px;
        font-size: 25px;
        color: white;
        text-align: center;
        box-shadow: 2px 2px 2px rgb(5, 5, 92);
    }
    
    div .etn:hover {
        box-shadow: 0px 0px 8px rgb(5, 5, 92);
        transform: scale(1.1, 1.5);
    }
    
    .itn {
        width: 1280px;
        height: 600px;
        background-color: rgb(176, 212, 253);
        position: relative;
        top: 35px;
        left: 30px;
    }
    
    div.b {
        position: absolute;
        top: 80px;
        left: 150px;
        width: 370px;
        height: 450px;
        z-index: 1;
        transition: all 2s;
    }
    
    div.b:hover {
        box-shadow: 0px 0px 8px rgb(32, 66, 110);
        transform: scale( 1.5);
    }
    
    h2 {
        position: absolute;
        color: rgb(55, 95, 180);
        font-size: 65px;
        font-weight: bold;
        top: 56px;
        right: 135px;
    }
    
    h2:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    p1 {
        position: absolute;
        top: 310px;
        right: 210px;
        color: rgba(65, 111, 138, 0.664);
    }
    
    p1:hover {
        color: rgba(241, 149, 28, 0.801);
    }
    
    div.ftn {
        position: absolute;
        width: 125px;
        height: 40px;
        transition: all 2s;
        background-color: white;
        top: 460px;
        right: 470px;
        border-radius: 8px;
        color: rgb(25, 74, 119);
        font-size: 25px;
        text-align: center;
        box-shadow: 2px 2px 2px rgb(59, 78, 102);
    }
    
    div .ftn:hover {
        box-shadow: 0px 0px 8px rgb(5, 5, 92);
        transform: scale(1.1, 1.5);
    }
    
    .B {
        width: 1280px;
        height: 600px;
        background-color: white;
        position: relative;
        top: 50px;
        left: 30px;
    }
    
    div.gtn {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: rgb(34, 76, 159);
        top: 370px;
        left: 525px;
        text-align: center;
        color: white;
        font-size: 50px;
        transition: all 3s;
        box-shadow: 2px 2px 2px rgb(45, 67, 94);
    }
    
    .gtn {
        animation: move 5s infinite;
        z-index: 2;
    }
    
    @keyframes move {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(30px, 30px);
        }
        50% {
            transform: translate(90px, 0px);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    div.htn {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: rgb(34, 76, 159);
        top: 320px;
        left: 100px;
        text-align: center;
        color: white;
        font-size: 55px;
        transition: all 4s;
        box-shadow: 0px 0px 8px rgba(22, 50, 87, 0.842);
    }
    
    .htn {
        animation: quiet 5s infinite;
        z-index: 2;
    }
    
    @keyframes quiet {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(30px, 60px);
        }
        50% {
            transform: translate(90px, 0px);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    div.jtn {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: rgb(34, 76, 159);
        top: 70px;
        left: 220px;
        text-align: center;
        color: white;
        font-size: 55px;
        transition: all 4s;
        box-shadow: 0px 0px 8px rgba(22, 50, 87, 0.842);
    }
    
    .jtn {
        animation: happy 5s infinite;
        z-index: 2;
    }
    
    @keyframes happy {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(30px, 60px);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    div.ktn {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: rgb(34, 76, 159);
        top: 50px;
        left: 510px;
        text-align: center;
        color: white;
        font-size: 55px;
        transition: all 4s;
        box-shadow: 0px 0px 8px rgba(22, 50, 87, 0.842);
    }
    
    .ktn {
        animation: novel 5s infinite;
        z-index: 2;
    }
    
    @keyframes novel {
        0% {
            transform: translate(0, 0);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    div.ltn {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: rgb(34, 76, 159);
        top: 130px;
        right: 280px;
        text-align: center;
        color: white;
        font-size: 55px;
        transition: all 4s;
        box-shadow: 0px 0px 8px rgba(22, 50, 87, 0.842);
    }
    
    .ltn {
        animation: life 5s infinite;
        z-index: 2;
    }
    
    @keyframes life {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(30px, 60px);
        }
        50% {
            transform: translate(90px, 0px);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    div.mtn {
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 90px;
        background-color: rgb(34, 76, 159);
        bottom: 30px;
        right: 100px;
        text-align: center;
        color: white;
        font-size: 55px;
        transition: all 4s;
        box-shadow: 0px 0px 8px rgba(22, 50, 87, 0.842);
    }
    
    .mtn {
        animation: the 5s infinite;
        z-index: 2;
    }
    
    @keyframes the {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(30px, 60px);
        }
        50% {
            transform: translate(90px, 0px);
        }
        75% {
            transform: translate(130px, 0px);
        }
    }
    
    .C {
        position: relative;
        width: 1280px;
        height: 1990px;
        background-color: rgb(176, 212, 253);
        top: 615px;
        left: 1px;
    }
    
    div.ntn {
        position: absolute;
        border-radius: 8px;
        width: 135px;
        height: 51px;
        background-color: rgb(34, 76, 159);
        font-size: 29px;
        color: white;
        text-align: center;
        box-shadow: 2px 2px 2px rgb(5, 5, 92);
        left: 565px;
        top: 10px;
        transition: all 4s;
    }
    
    div.ntn:hover {
        transform: scale(1.5);
    }
    
    div.d {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 80px;
        left: 80px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div .d:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    .c {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 80px;
        right: 150px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.c:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.e {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 510px;
        left: 80px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.e:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.f {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 510px;
        right: 150px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.f:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.g {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 230px;
        right: 450px;
        z-index: 1;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.g:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.h {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 950px;
        left: 80px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.h:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.i {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 950px;
        right: 150px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.i:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    div.j {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 770px;
        right: 450px;
        z-index: 1;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.j:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    .l {
        position: absolute;
        width: 430px;
        height: 300px;
        top: 1490px;
        right: 150px;
        z-index: 1;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 3s;
    }
    
    div.l:hover {
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        z-index: 2;
    }
    
    .otn {
        position: absolute;
        width: 470px;
        height: 500px;
        background-color: rgb(117, 163, 215);
        left: 110px;
        top: 1450px;
        box-shadow: 0px 0px 6px rgb(60, 123, 173);
        z-index: 1;
    }
    
    h4 {
        position: absolute;
        color: white;
        font-size: 25px;
        top: 100px;
        left: 50px;
    }
    
    h4:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    p7 {
        position: absolute;
        color: white;
        font-size: 23px;
        top: 187px;
        left: 50px;
        color: white;
    }
    
    p7:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    .k {
        position: absolute;
        width: 5px;
        height: 20px;
        top: 185px;
        right: 50px;
    }
    
    div.ptn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 150px;
        height: 55px;
        top: 475px;
        right: 370px;
        font-size: 24px;
        border-radius: 5px;
    }
    
    div.ptn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
        transform: translate(-50%, -50%);
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 4px;
        transition: all 5s;
    }
    
    .ptn :hover {
        animation: fruit 5s linear infinite;
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 112, 241);
    }
    
    @keyframes fruit {
        0% {
            background-position: 0%;
        }
        100% {
            background-position: 400%;
        }
    }
    
    div.qtn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 180px;
        height: 45px;
        top: 360px;
        left: 143px;
        font-size: 25px;
        border-radius: 5px;
    }
    
    div.qtn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
        transform: translate(-50%, -50%);
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        border-radius: 4px;
        transition: all 5s;
    }
    
    .qtn :hover {
        animation: vege 5s linear infinite;
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 112, 241);
    }
    
    @keyframes vege {
        0% {
            background-position: 0%;
        }
        100% {
            background-position: 400%;
        }
    }
    
    .D {
        width: 1280px;
        height: 500px;
        background-color: rgb(176, 212, 253);
        position: relative;
        top: 630px;
        left: 0px;
    }
    
    div.rtn {
        position: absolute;
        border-radius: 8px;
        width: 200px;
        height: 48px;
        background-color: rgb(34, 76, 159);
        font-size: 29px;
        color: white;
        text-align: center;
        box-shadow: 2px 2px 2px rgb(5, 5, 92);
        left: 190px;
        top: 80px;
        transition: all 4s;
    }
    
    div .rtn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    p8 {
        position: absolute;
        left: 190px;
        top: 147px;
        color: white;
        font-size: 25px;
        color: rgb(34, 76, 159);
    }
    
    p8:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    p9 {
        position: absolute;
        left: 190px;
        top: 187px;
        color: white;
        font-size: 25px;
        color: rgb(34, 76, 159);
    }
    
    p9:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    p10 {
        position: absolute;
        left: 190px;
        top: 230px;
        color: white;
        font-size: 25px;
        color: rgb(34, 76, 159);
    }
    
    p10:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    p11 {
        position: absolute;
        left: 190px;
        top: 275px;
        color: white;
        font-size: 25px;
        color: rgb(34, 76, 159);
    }
    
    p11:hover {
        color: rgba(241, 149, 28, 0.822);
    }
    
    div.m {
        position: absolute;
        top: 49px;
        right: 185px;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
        transition: all 4s;
    }
    
    div.stn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 90px;
        height: 33px;
        background-color: white;
        top: 330px;
        left: 192px;
        font-size: 20px;
        border-radius: 5px;
        transition: all 3s;
        box-shadow: 0px 0px 10px rgb(109, 141, 184);
    }
    
    div.stn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
    }
    
    div .stn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    div.ttn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 83px;
        height: 33px;
        background-color: white;
        top: 330px;
        left: 320px;
        font-size: 20px;
        border-radius: 5px;
        transition: all 3s;
        box-shadow: 0px 0px 10px rgb(109, 141, 184);
    }
    
    div.ttn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
    }
    
    div .ttn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    div.utn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 164px;
        height: 33px;
        background-color: white;
        top: 380px;
        left: 192px;
        font-size: 20px;
        border-radius: 5px;
        transition: all 3s;
        box-shadow: 0px 0px 10px rgb(109, 141, 184);
    }
    
    div.utn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
    }
    
    div .utn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    div.vtn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 99px;
        height: 33px;
        background-color: white;
        top: 330px;
        left: 440px;
        font-size: 20px;
        border-radius: 5px;
        transition: all 3s;
        box-shadow: 0px 0px 10px rgb(109, 141, 184);
    }
    
    div.vtn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
    }
    
    div .vtn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    div.wtn {
        position: absolute;
        display: inline-block;
        text-decoration: none;
        color: rgb(55, 95, 180);
        width: 85px;
        height: 33px;
        background-color: white;
        top: 380px;
        left: 440px;
        font-size: 20px;
        border-radius: 5px;
        transition: all 3s;
        box-shadow: 0px 0px 10px rgb(52, 86, 131);
    }
    
    div.wtn a {
        position: absolute;
        text-decoration: none;
        color: rgb(55, 95, 180);
    }
    
    div .wtn:hover {
        background-color: rgb(243, 181, 88);
        transform: scale(1.5);
        box-shadow: 0px 0px 10px rgb(109, 141, 184);
    }
    
    p12 {
        position: absolute;
        right: 20px;
        bottom: 15px;
        color: white;
        font-size: 15px;
    }
</style>




<body>

    <div class="container">

        <ul class="nav">

            <li><a href="#ABOUT">ABOUT</a></li>
            <li><a href="#SKILL">SKILL</a></li>
            <li><a href="#WORK">WORK</a></li>
            <li><a href="#CONTACT">CONTACT</a></li>
        </ul>
        <div class="A">

            <div class="a"> <img src="1.png" width="1280px" height="700px"></div>
            <div class="btn">
                <h1>WELCOME TO
                    <br> MY PLACE</h1>
                <p>For life,I want to live more exciting life,be able to<br> love the work I do every day,and take my parents <br>around the world in my free time. </p>

            </div>
            <div class="etn">Let's go! </div>
        </div>
    </div>
    <div class="itn">
        <h2 id="ABOUT"></h2>
        <div class="b"> <img src="2.jpg" width="370px" height="450px"> </div>
        <h2>Hi,my name is
            <br>Mimeijin.</h2>
        <p1>My major is art and technology. My hobbies are
            <br> particularly wide, such as photography, dancing,
            <br> singing, painting, reading, writing articles, playing
            <br>badminton, etc. One of my favorite things to do is
            <br>to travel with my parents. when I am free.</p1>
        <div class="ptn">
            <a href="    http://mi-meijin.gitee.io/assignment-8" target="About me">About me>></a>
        </div>



    </div>
    <div class="B">
        <h2 id="SKILL"></h2>
        <div class="gtn">
            <h3>Skill

            </h3>
        </div>
        <div class="htn">
            <p2>
                PS 89%
            </p2>
        </div>
        <div class="jtn">
            <p3>AI 93%</p3>
        </div>
        <div class="ktn">
            <p4>HP 90%</p4>
        </div>
        <div class="ltn">
            <p5>AE 85%</p5>
        </div>
        <div class="mtn">
            <p6>PG 95%</p6>
        </div>
        <div class="C">
            <h2 id="WORK"></h2>
            <div class="ntn">My works</div>
            <div class="d"> <img src="3.jpg" width="500px" height="390px"> </div>
            <div class="c"> <img src="4.jpg" width="500px" height="390px"> </div>
            <div class="e"> <img src="5.jpg" width="500px" height="390px"> </div>
            <div class="f"> <img src="6.jpg" width="500px" height="390px"> </div>
            <div class="g"> <img src="7.jpg" width="500px" height="390px"> </div>
            <div class="h"> <img src="8.jpg" width="500px" height="390px"> </div>
            <div class="i"> <img src="9.jpg" width="500px" height="390px"> </div>
            <div class="j"> <img src="10.jpg" width="500px" height="390px"> </div>
            <div class="l"> <img src="11.jpg" width="500px" height="390px"> </div>
            <div class="otn">
                <h4>ALL WORK</h4>
                <p7>This is a collection of my works in 2020.also to record all my efforts this year, so that it can always exist in my memory.</p7>
                <div class="qtn">
                    <a href="  http://mi-meijin.gitee.io/assignment-5" target="More works">More works>></a>
                </div>
            </div>
        </div>
        <div class="D">
            <h2 id="CONTACT"></h2>
            <div class="rtn">Contact me</div>
            <p8>Phone:15184304950</p8>
            <p9>QQ email:2836853996qq@.com</p9>
            <p10>Weixin:mimeijin15184304950</p10>
            <p11>QQ:2645524427</p11>
            <div class="m"> <img src="12.jpg" width="350px" height="400px"> </div>
            <div class="stn">
                <a href=" https://weibo.com/u/7387355347?topnav=1&wvr=6&topsug=1&is_all=1" target="Wei bo">Weibo>></a>
            </div>
            <div class="ttn">
                <a href="https://gitee.com/mi-meijin/dashboard/projects" target="Gitee">Gitee>></a>
            </div>
            <div class="utn">
                <a href="https://huaban.com/nbb7hunnga/" target="Huabanwang">Hua banwang>></a>
            </div>
            <div class="vtn">
                <a href="https://www.zcool.com.cn/u/22235258" target="Zhanku">Zhanku>></a>
            </div>
            <div class="wtn">
                <a href="https://www.zhihu.com/people/ng-ng-77-53-41" target="Zhihu">Zhihu>></a>
            </div>

            <p12>Copyright 2020Mimeijin</p12>

        </div>




    </div>






















    </div>



</body>

</html>